<template>
  <div class="newsCom  mt-4 pl-4">
    <ul>
      <li  class="item mb-2" :key="index" v-for="(item,index) in list">
            <div class="row">
              <div class="time col-12 col-sm-12 col-md-2 col-lg-2">{{formatDate(new Date(item.publishTime), 'yy-MM-dd')}}</div>
              <div class="col-12 col-sm-12 col-md-10 col-lg-10">
                <div class="img-text d-flex">
                  <div>
                    <img class="mr-3 " :src="getR43Url(item.img ? item.img : 'news_default.png')">
                  </div>
                  <div class="media-body">
                    <h2 class="over-flow-text">{{item.title}}</h2>
                    <p>
                  <span class="over-flow-text">
                    {{item.description}}
                  </span>
                      <a v-if="departmentId" :href="`#/zhuanke/${departmentId}/anli/${item.id}`">［详情］</a>
                      <a v-if="!departmentId" :href="`#/news/${type}/${item.id}`">［详情］</a>
                    </p>
                  </div>
                </div>
              </div>
            </div>
      </li>
      <div v-if="list.length === 0" class="no-con">暂无内容</div>
      <div class="d-flex justify-content-center">
        <navigation-com @change="onChange" :total="total"></navigation-com>
      </div>
    </ul>
  </div>

</template>

<script>
  import navigationCom from "@/components/navigationCom"


  export default {
    props:['list', 'total', 'type','departmentId'],
    computed: {},
    data() {
      return {
        root:'',
      }
    },
    components: {
      navigationCom
    },
    mounted() {


    },
    methods: {
      onChange(pagination) {
        this.$emit('change', pagination)
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~assets/style/public";

  .newsCom {
    ul, li {
      list-style: none;
    }

    .item{
        width: 100%;
        .time{
          font-family: MicrosoftYaHeiUI-Bold;
          font-size: 16/@size;
          color: #F56C6C;
          letter-spacing: 0;
          text-align: center;
        }
        .img-text{
          border-bottom: 1px solid #E5E9F2;
          .padding(0,0,20,0);
          width: 100%;
          img{
            width: 200/@size;
          }
        }
        .media-body{
          h2{
            font-family: MicrosoftYaHeiUI;
            font-size: 16/@size;
            color: #222222;
            letter-spacing: 0;
            line-height: 24/@size;
            height: 50/@size;
            margin-bottom: 20/@size;
          }
          p{
            font-family: MicrosoftYaHeiUI;
            font-size: 14/@size;
            color: #444444;
            letter-spacing: 0;
            line-height: 24/@size;
            a{
              font-family: MicrosoftYaHeiUI;
              font-size: 14/@size;
              letter-spacing: 0;
              line-height: 24/@size;
            }
          }
        }
    }

  }

  @media (min-width: 320px) and (max-width:767px) {
    .newsCom {

      .item{
        .time{
          font-family: @font-title;
          font-size: @font-24;
          text-align: left;
          margin-bottom: 20/@size;
        }
        .media-body{
          h2{
            font-family: @font-title;
            font-size: @font-26;
            margin-bottom: 10/@size;
            line-height: 1.6;
            height: 40/@size;
          }
          p{
            font-family: @font-first;
            font-size: @font-24;
            line-height: 32/@size;
            a{
              font-family: MicrosoftYaHeiUI;
              font-size: 24/@size;
              letter-spacing: 0;
              line-height: 24/@size;
            }
          }
        }
      }

    }
  }
</style>
